<template>
  <div>
    <div style="display: flex; flex-direction: row; margin-bottom: 20px;">
      <el-button size="medium" type="primary" icon="el-icon-plus" @click="createTable">
        新建表
      </el-button>
      <el-button style="margin-left: auto;" size="medium" icon="el-icon-refresh" :loading="loading" @click="refresh">
        刷新
      </el-button>
    </div>
    <el-table v-loading="loading" :data="tables" style="width: 100%" :border="true">
      <el-table-column :align="'center'" prop="name" label="表名" width="200">
      </el-table-column>
      <el-table-column :align="'center'" prop="families" label="列族">
        <template v-slot="scope">
          <tag-input :value="scope.row.families.map(family => family.name)" :read-only="true" height="30px"
            @item-click="$event => onItemClick($event, scope.row)">
          </tag-input>
        </template>
      </el-table-column>
      <el-table-column :align="'center'" label="操作" width="200">
        <template v-slot="scope">
          <el-button size="small" class="el-icon-edit-outline" @click="$emit('open-table', scope.row.name)">
            打开表
          </el-button>
          <el-button size="small" class="el-icon-delete" @click="deleteTable(scope.row)">
            删除表
          </el-button>
        </template>
      </el-table-column>
      <el-empty slot="empty" description="暂无数据"></el-empty>
    </el-table>
    <el-dialog title="新建表" :visible.sync="dialogVisible" :append-to-body="true">
      <el-form labelPosition="left">
        <el-form-item label="表名" label-width="50px">
          <el-input v-model="newTableName"></el-input>
        </el-form-item>
        <el-form-item label="列族" label-width="50px">
          <tag-input v-model="newTableFamilies" height="38px" buttonContent="+"></tag-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="medium" @click="handleCancelCreate">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleConfirmCreate">确 定</el-button>
      </div>
    </el-dialog>
    <el-drawer :title="drawerTitle" :visible.sync="drawerVisible" direction="rtl">
      <div style="padding-left: 20px; padding-right: 20px;">
        <el-descriptions :column="1" :border="true" direction="vertical">
          <el-descriptions-item v-for="param in params" :key="param.name" :label="param.name">
            <span class="value" @click="copyText(param.value)">{{ param.value }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import util from '@/util'
import api from '@/api'
export default {
  props: {
    connectionId: {
      type: String,
      default: ''
    },
    tables: {
      type: Array,
      default: () => []
    }
  },
  components: {},
  data() {
    return {
      loading: false,
      drawerVisible: false,
      drawerTitle: '',
      dialogVisible: false,
      newTableName: '',
      newTableFamilies: [],
      params: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    async refresh() {
      this.loading = true
      const resp = await api.table.listTable(this.connectionId)
      if (resp.ok) {
        this.$emit('update', resp.data ?? [])
      } else {
        this.$message({ message: resp.message, type: 'error', duration: 1500 })
      }
      this.loading = false
    },
    createTable() {
      this.newTableName = ''
      this.newTableFamilies = []
      this.dialogVisible = true
    },
    handleCancelCreate() {
      this.dialogVisible = false
    },
    async handleConfirmCreate() {
      const resp = await api.table.createTable(this.connectionId, this.newTableName, this.newTableFamilies)
      if (resp.ok) {
        this.$message({ message: '创建成功', type: 'info', duration: 1000 })
        this.dialogVisible = false
        this.refresh()
      } else {
        this.$message({ message: resp.message, type: 'error', duration: 1500 })
      }
    },
    async deleteTable(table) {
      const resp = await api.table.deleteTable(this.connectionId, [table.name])
      if (resp.ok) {
        this.$message({ message: '删除成功', type: 'info', duration: 1000 })
      } else {
        this.$message({ message: resp.message, type: 'error', duration: 1500 })
      }
      this.refresh()
    },
    onItemClick(index, table) {
      const family = JSON.parse(JSON.stringify(table.families[index]))
      this.drawerTitle = table.name + ' - ' + family.name
      const params = []
      for (const [name, value] of Object.entries(family.info)) {
        params.push({ name, value })
      }
      this.params = params
      this.drawerVisible = true
    },
    copyText(text) {
      util.copyText(text)
      this.$message({ message: `已复制：${text}`, type: 'info', duration: 1000 })
    }
  },
  beforeCreate() { },
  created() { },
  beforeDestroy() { },
  destroyed() { }
}
</script>
<style lang="scss" scoped>
::v-deep {
  .el-descriptions .is-bordered .el-descriptions-item__cell {
    padding: 0;

    .value {
      padding-left: 20px;
      padding-right: 20px;
      display: block;
      line-height: 48px;
      text-align: start;
    }

    &.el-descriptions-item__label {
      padding-left: 20px;
      padding-right: 20px;
      line-height: 48px;
      text-align: start;
    }
  }
}
</style>